/**
 * SA扫描管理通用样式
 * 可被所有表格组件导入使用
 */

// 通用表格容器样式
.sa-table-container {
    padding: 0;
    background: transparent;
    min-height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

// 通用筛选栏样式
.sa-filter-bar {
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 0;
    transition: box-shadow 0.3s ease;

    &:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }

    .ant-space {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .ant-input,
    .ant-picker,
    .ant-select {
        border-radius: 6px;
        transition: all 0.2s ease;

        &:hover {
            border-color: #40a9ff;
        }

        &:focus,
        &.ant-input-focused,
        &.ant-picker-focused,
        &.ant-select-focused {
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
        }
    }

    .ant-btn {
        border-radius: 6px;
        font-weight: 500;
        transition: all 0.2s ease;
        min-width: 80px;

        &:hover:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        &:active:not(:disabled) {
            transform: translateY(0);
        }

        &.ant-btn-primary {
            &:hover:not(:disabled) {
                background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
            }
        }
    }
}

// 通用表格样式
.sa-table-wrapper {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.3s ease;

    &:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }

    .hover-row {
        transition: all 0.2s ease;
        cursor: pointer;
        
        &:hover {
            background-color: #f5f5f5 !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }
    }

    // 表格头部样式
    .ant-table-thead > tr > th {
        background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%) !important;
        border-bottom: 2px solid #e8e8e8 !important;
        font-weight: 600 !important;
        color: #262626 !important;
        padding: 18px 16px !important;
        white-space: nowrap;
        font-size: 14px;
        letter-spacing: 0.3px;

        &.ant-table-cell-fix-left,
        &.ant-table-cell-fix-right {
            background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%) !important;
        }

        &::before {
            display: none;
        }
    }

    // 表格行样式
    .ant-table-tbody > tr {
        transition: all 0.2s ease;

        &:hover {
            background-color: #fafafa !important;
        }

            background-color: #fff;
        }

        // 文本溢出处理
        &.ant-table-cell-ellipsis {
            .ant-table-cell-content {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }

    // 标签样式
    .ant-tag {
        border-radius: 4px;
        font-weight: 500;
        padding: 2px 10px;
        margin: 0;
        border: none;
        font-size: 13px;
    }

    // 链接按钮样式
    .ant-btn-link {
        padding: 0;
        height: auto;
        line-height: 1.5;
        
        &:hover {
            text-decoration: underline;
            color: #40a9ff;
        }
    }

    // 空数据样式
    .ant-empty {
        padding: 40px 0;

        .ant-empty-description {
            color: #8c8c8c;
            font-size: 14px;
        }
    }

    // 加载状态样式
    .ant-spin-container {
        position: relative;
        transition: opacity 0.3s;

        &.ant-spin-blur {
            opacity: 0.5;
            pointer-events: none;
        }
    }

    .ant-spin-nested-loading {
        .ant-spin {
            max-height: none;
        }
    }
}

// 通用分页样式
.sa-pagination {
    margin-top: 20px;
    padding: 16px 20px;
    background: #fff;
    border-radius: 0 0 8px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .ant-pagination-total-text {
        flex: 1;
        color: #595959;
        font-size: 14px;
        font-weight: 500;
    }

    .ant-pagination-item {
        border-radius: 6px !important;
        transition: all 0.2s ease;
        
        &:hover {
            border-color: #40a9ff;
            transform: translateY(-1px);
        }

        &.ant-pagination-item-active {
            background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%) !important;
            border-color: #1890ff !important;
            font-weight: 600;
            box-shadow: 0 2px 4px rgba(24, 144, 255, 0.3);

            a {
                color: #fff;
            }
        }
    }

    .ant-pagination-prev,
    .ant-pagination-next {
        border-radius: 6px !important;
        transition: all 0.2s ease;

        &:hover:not(.ant-pagination-disabled) {
            border-color: #40a9ff;
            transform: translateY(-1px);

            .ant-pagination-item-link {
                color: #40a9ff;
            }
        }
    }

    .ant-pagination-options {
        .ant-select-selector {
            border-radius: 6px !important;
            transition: all 0.2s ease;

            &:hover {
                border-color: #40a9ff;
            }
        }
    }

    .ant-pagination-jump-next,
    .ant-pagination-jump-prev {
        border-radius: 6px !important;
    }

    .ant-pagination-options-quick-jumper {
        input {
            border-radius: 6px;
            transition: all 0.2s ease;

            &:hover {
                border-color: #40a9ff;
            }

            &:focus {
                border-color: #1890ff;
                box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
            }
        }
    }
}

// 状态标签颜色
.status-tag-success {
    background-color: #f6ffed;
    border-color: #b7eb8f;
    color: #52c41a;
}

.status-tag-error {
    background-color: #fff2f0;
    border-color: #ffccc7;
    color: #ff4d4f;
}

.status-tag-warning {
    background-color: #fffbe6;
    border-color: #ffe58f;
    color: #faad14;
}

.status-tag-processing {
    background-color: #e6f7ff;
    border-color: #91d5ff;
    color: #1890ff;
}

.status-tag-default {
    background-color: #fafafa;
    border-color: #d9d9d9;
    color: #595959;
}

// 响应式设计
@media (max-width: 1400px) {
    .scan-management {
        .scan-management-header {
            padding: 16px 32px;
        }

        .scan-management-content {
            padding: 24px 32px;
        }
    }
}

@media (max-width: 1200px) {
    .scan-management {
        .scan-management-header {
            padding: 16px 24px;
        }

        .scan-management-content {
            padding: 20px 24px;
        }
    }

    .sa-filter-bar {
        .ant-space {
            width: 100%;
        }
    }
}

@media (max-width: 768px) {
    .scan-management {
        .scan-management-header {
            padding: 12px 16px;
        }

        .scan-management-content {
            padding: 16px;
        }
    }

    .sa-table-container {
        padding: 0;
    }

    .sa-filter-bar {
        padding: 16px;

        .ant-input,
        .ant-picker,
        .ant-select {
            width: 100% !important;
        }

        .ant-btn {
            width: 100%;
        }
    }

    .sa-table-wrapper {
        .ant-table-tbody > tr > td,
        .ant-table-thead > tr > th {
            padding: 12px 8px !important;
        }
    }

    .sa-pagination {
        padding: 12px 16px;
        flex-direction: column;
        gap: 12px;

        .ant-pagination-total-text {
            width: 100%;
            text-align: center;
        }
    }
}

// 工具提示样式增强
.ant-tooltip {
    max-width: 400px;

    .ant-tooltip-inner {
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 13px;
        line-height: 1.5;
    }
}

// 部署日志 Modal 特殊样式
.deploy-log-modal {
    .ant-modal-header {
        border-bottom: 2px solid #f0f0f0;
        padding: 20px 24px;
    }

    .ant-modal-title {
        font-size: 16px;
        font-weight: 600;
        color: #262626;
    }

    .ant-modal-body {
        padding: 24px;
        max-height: 500px;
        overflow-y: auto;

        // 自定义滚动条
        &::-webkit-scrollbar {
            width: 8px;
        }

        &::-webkit-scrollbar-track {
            background: #f5f5f5;
            border-radius: 4px;
        }

        &::-webkit-scrollbar-thumb {
            background: #d9d9d9;
            border-radius: 4px;

            &:hover {
                background: #bfbfbf;
            }
        }
    }

    .ant-modal-footer {
        border-top: 1px solid #f0f0f0;
        padding: 16px 24px;
    }
}

// 加载动画增强
.ant-spin-dot {
    font-size: 24px;
}

.ant-spin-text {
    margin-top: 8px;
    color: #595959;
    font-size: 14px;
}

// 表格滚动条样式
.ant-table-body {
    &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    &::-webkit-scrollbar-track {
        background: #f5f5f5;
        border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
        background: #d9d9d9;
        border-radius: 4px;
        transition: background 0.2s ease;

        &:hover {
            background: #bfbfbf;
        }
    }
}
